/**
 * =============================================================================
 * ************   List 列表   ************
 * =============================================================================
 */
@import '../avatar/index';
@import '../collapse/index';

/* 列表 */
.mdui-list {
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background-color: transparent;

  // 子列表没有上下间距
  .mdui-list {
    padding: 0;
  }

  // 分割线上下边距
  &>.mdui-divider,
  &>.mdui-divider-light,
  &>.mdui-divider-dark,
  &>.mdui-divider-inset,
  &>.mdui-divider-inset-light,
  &>.mdui-divider-inset-dark {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  a {
    color: inherit !important;
    text-decoration: none;
  }

  // 使用副标题时自动添加分割线
  .mdui-subheader,
  .mdui-subheader-inset {
    &::before {
      position: absolute;
      right: 0;
      left: 0;
      display: block;
      height: 1px;
      background-color: @color-black-divider;
      content: ' ';
    }

    margin-top: 8px;

    &:first-child {
      &::before {
        background-color: transparent;
      }

      // 第一个副标题把列表的 padding-top 抵消掉
      margin-top: -8px;
    }
  }

  .mdui-subheader-inset {
    &::before {
      left: 56px;
    }
  }
}

/* 列表项 */
.mdui-list-item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 16px;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s @animation-curve-default;

  &:hover {
    background-color: @color-hover-black;
  }

  /* 列表项图标 */
  .mdui-icon {
    width: 24px;
    min-width: 24px;
    height: 24px;
    color: @color-black-icon;
  }
}

/* 列表项内容 */
.mdui-list-item-content {
  flex-grow: 1;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* 列表项内容的副内容 */
.mdui-list-item-title {
  ~.mdui-list-item-text {
    margin-top: 4px;
    font-size: 14px;
    opacity: @opacity-black-secondary;
  }
}

/* 激活状态的列表项 */
.mdui-list-item-active {
  font-weight: 700;
  background-color: @color-hover-black;
  border-left: 2px solid;

  .mdui-list-item-content {
    font-weight: 700;
  }

  .mdui-list-item-title {
    ~.mdui-list-item-text {
      font-weight: 400;
    }
  }
}

/* 限制文本高度 */
.mdui-list-item-one-line,
.mdui-list-item-two-line,
.mdui-list-item-three-line {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

.mdui-list-item-one-line {
  -webkit-line-clamp: 1;
  height: 20px;
}

.mdui-list-item-two-line {
  -webkit-line-clamp: 2;
  height: 40px;
}

.mdui-list-item-three-line {
  -webkit-line-clamp: 3;
  height: 60px;
}

/* 列表项内的元素间添加间距 */
.mdui-avatar,
.mdui-checkbox,
.mdui-switch,
.mdui-radio,
.mdui-icon {
  ~.mdui-list-item-content {
    margin-left: 16px;
  }
}

.mdui-list-item-content {

  ~.mdui-list-item-avatar,
  ~.mdui-checkbox,
  ~.mdui-switch,
  ~.mdui-radio,
  ~.mdui-icon {
    margin-left: 16px;
  }

  ~.mdui-checkbox,
  ~.mdui-radio {
    padding-left: 24px;
  }
}

/* 密集型列表 */
.mdui-list-dense {
  padding: 4px 0;
  font-size: 13px;

  &>.mdui-divider,
  &>.mdui-divider-light,
  &>.mdui-divider-dark,
  &>.mdui-divider-inset,
  &>.mdui-divider-inset-light,
  &>.mdui-divider-inset-dark {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  // 副标题
  .mdui-subheader,
  .mdui-subheader-inset {
    height: 40px;
    margin-top: 4px;
    font-size: 12px;
    line-height: 40px;

    &:first-child {
      margin-top: -4px;
    }
  }

  // 密集型列表项
  .mdui-list-item {
    min-height: 40px;

    &::after {
      height: 40px;
    }
  }

  // 图标
  .mdui-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
  }

  // 头像
  .mdui-avatar {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }

  // 列表项内容
  .mdui-list-item-content {
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 13px;
    line-height: 18px;
  }

  .mdui-list-item-title {
    ~.mdui-list-item-text {
      margin-top: 2px;
      font-size: 13px;
    }
  }

  // 限制文本高度
  .mdui-list-item-one-line {
    height: 18px;
  }

  .mdui-list-item-two-line {
    height: 36px;
  }

  .mdui-list-item-three-line {
    height: 54px;
  }
}


/**
 * =============================================================================
 * ************   List 强调色   ************
 * =============================================================================
 */

& {
  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
    .loop-accent-theme((@counter-color - 1));
    @colorName: extract(@globalAccentColors, @counter-color);

    @color: 'color-@{colorName}-a200';

    .mdui-theme-accent-@{colorName} when not (@colorName =null) {

      // 选中状态的项
      .mdui-list-item-active {
        border-color: @@color;
      }
    }
  }

  .loop-accent-theme(length(@globalAccentColors));
}


/**
 * =============================================================================
 * ************   List dark   ************
 * =============================================================================
 */
.layout-theme({
  .mdui-list {

    // 副标题的分割线
    .mdui-subheader,
    .mdui-subheader-inset {
      &::before {
        background-color: @color-white-divider;
      }

      &:first-child {
        &::before {
          background-color: transparent;
        }
      }
    }
  }

  // 列表项
  .mdui-list-item {
    color: @color-white-text;

    &:hover {
      background-color: @color-hover-white;
    }
  }

  // 列表项图标
  .mdui-icon {
    color: @color-white-icon;
  }

  // 列表内容副内容
  .mdui-list-item-title {
    ~.mdui-list-item-text {
      opacity: @opacity-white-secondary;
    }
  }

  // 激活状态的列表项
  .mdui-list-item-active {
    background-color: @color-hover-white;
  }
});

/**
 * ==============================================================================
 * ************   List inner theme   ************
 * ==============================================================================
 */
[class*="mdui-color-"] {
  .mdui-list-item {
    color: inherit;
  }
}